<template>
  <div class="shouceng">
    <div class="title">
      <van-nav-bar title="收藏店铺" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>

    <div class="shopping">
      <div class="main" v-for='(item,index) in shopData' :key="index">
        <div class="count" @click='qiehuan(item)'>
          <div class="count-left">
            <div class="img">
              <img :src="item.picUrl" alt="">
            </div>
          </div>
          <div class="count-right">
            <div class="title">
              <h3>{{item.name}}</h3>
            </div>
            <div class="xing-yueshou"><span style="color:red">⭐ 4.3</span>&nbsp;&nbsp;<span>{{item.monthSalesTip}}</span></div>
            <div class="qisong">
              <span>{{item.minPriceTip}}</span>
              <span>远距离{{item.shippingFeeTip}}</span>
              <span>{{item.deliveryTimeTip}}</span>
            </div>
            <div class="evaluate">
              <div class="evn">“铁子进来看看”</div>
              <div class="evn">“整点东西吃”</div>
            </div>
          </div>
        </div>
      </div>
      <div class="font" v-show="shopData.length != ''">
        已全部加载完
      </div>
    </div>

    <div class="null" v-show="shopData.length == '' ">
      <div class="kong">
        收藏空空如也，<span @click='push_index'>去逛逛</span>
      </div>
    </div>
  </div>

</template>

<script>
// import { favlist_list } from "../axios/api";
// import { Toast } from 'vant';
import { mapState } from "vuex";



export default {

  data() {
    return {
      collectionData: []
    }
  },
  computed: {
    ...mapState(['shopData']),
  },
  mounted() {
    // let username = JSON.parse(localStorage.getItem('userinfo')).id
    // favlist_list({ userid: username }).then(
    //   response => {
    //     if (response.data.code == 200) {
    //       this.collectionData = response.data.list;
    //       Toast.clear()
    //       console.log('这是收藏列表的', response.data);
    //     }
    //   }
    // )
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    push_index() {
      this.$router.push('/myindex/index')
    },
    qiehuan(item) {
      this.$router.push('/myparticulars/' + item.mtWmPoiId)
    }
  }
}
</script>

<style lang='scss' scoped>
.font {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(128, 128, 128, 0.716);
}
.null {
  width: 100%;
  height: 300px;
  // background-color: aqua;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  .kong {
    span {
      color: orange;
    }
  }
}
.shopping {
  width: 100%;
  height: 100%;
  //   background-color: aqua;
  margin-top: 15px;
  margin-bottom: 50px;

  .main {
    margin-bottom: 20px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .count {
      width: 94%;
      height: 140px;
      //   background-color: pink;
      // border-bottom: 1px solid rgba(128, 128, 128, 0.501);
      display: flex;
      align-items: center;
      justify-content: space-between;
      .count-left {
        width: 30%;
        height: 100%;
        // background-color: red;
        display: flex;
        justify-content: center;
        align-items: center;
        .img {
          width: 80%;
          height: 80%;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .count-right {
        flex: 1;
        height: 100%;
        // background-color: rgba(255, 166, 0, 0.173);
        .xing-yueshou {
          margin: 8px;
          span {
            color: gray;
            font-size: 14px;
          }
        }
        .qisong {
          width: 100%;
          height: 24px;
          //   background-color: rgba(255, 0, 0, 0.185);
          display: flex;
          justify-content: space-around;
          align-items: center;
          span {
            color: gray;
            font-size: 14px;
          }
        }
        .evaluate {
          width: 100%;
          height: 30px;
          margin-top: 6px;
          //   background-color: rgba(255, 0, 0, 0.207);
          display: flex;
          align-items: center;
          .evn {
            width: 120px;
            margin-left: 10px;
            height: 20px;
            background-color: #ffe6b5;
            border-radius: 10px;
            color: #ff5000;
            font-size: 12px;
            text-align: center;
            line-height: 20px;
          }
        }
      }
    }
  }
}
</style>